<template>
  <div id="echartContainer6"></div>
</template>

<script>
  export default {
    name: 'component6',
    props: {
      positionByEducation: {
        default: function () {
          return [0, 0, 0, 0]
        }
      }
    },
    data() {
      return {
        option: {
          title: {
            text: '学历要求',
            color: 'white',
            textStyle: {
              fontSize: 18,//字体大小
              color: '#ffffff',//字体颜色
              margin: [0, 0, 10, 10]
            },
          },

          tooltip: {},
          color: ["#3B8E9C", "#7BE3FA"],
          radar: {
            name: {
              textStyle: {
                color: 'white',
                borderRadius: 0,
                padding: [0, 0]
              },
              nameGap: '3',//字与图形距离
            },
            indicator: [
              {name: '不要求/不限', max: 50},
              {name: '大专', max: 50},
              {name: '本科/硕士', max: 50},
              {name: '博士', max: 50}
            ],
            radius: 50, //缩放比
            scale: true
          },
          series: [{
            name: '职位数',
            type: 'radar',
            areaStyle: {normal: {}},
            data: [
              {name: "职位数", value: [0, 0, 0, 0]}
            ]
          }]
        }

      }
        ;
    },
    methods: {
      drawBarChart() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('echartContainer6'));
        // 绘制基本图表

        //加载动画
        // myChart.showLoading();
        myChart.setOption(this.option);
        //             myChart.hideLoading();

      }
    },
    watch: {
      positionByEducation: function () { //浏览器刷新页面后watch不生效

        var myChart = this.$echarts.getInstanceByDom(document.getElementById('echartContainer6'));
        if (!this.positionByEducation[0]) {
          return false
        }
        let count = 0;
        this.positionByEducation.forEach(number => {
          count += number
        });
        this.positionByEducation.forEach((number, index) => {
          this.positionByEducation[index] = Math.ceil(number / count * 100);
          if (this.positionByEducation[index] > 50) {
            this.positionByEducation[index] = 50;
          }
        });
        console.info("Education Changed");
        myChart.setOption({
          series: [{
            data: [
              {name: "职位数", value: this.positionByEducation}
            ]
          }]
        });
      }


    },
    mounted() {
      //调用drawBarChart()
      this.drawBarChart();
    }
  };
</script>
<style scoped>
  #echartContainer6 {
    width: 100%;
    height: 100%;
  }
</style>
